<template>
  <div>
    <el-form ref="deptForm" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width: 80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width: 80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width: 80%" placeholder="请选择">
          <el-option v-for="obj in employeesList" :key="obj.id" :value="obj.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width: 80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hSubmit">确定</el-button>
        <el-button @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  // name: 'DepartDialog',
  name: 'DepartDialog',
  props: {
    // 员工列表
    employeesList: {
      type: Array,
      default: () => []
    },
    // 添加/编辑状态
    isEdit: {
      type: Boolean,
      default: false
    },
    // 用于验证code和name的部门列表数据
    originList: {
      type: Array,
      default: () => []
    },
    djId: {
      type: String,
      default: ''
    }
  },
  data() {
    // 验证部门编码（不能和所有人重复)
    const validCode = (rule, value, callback) => {
      // 添加子部门的时候：部门编码，和所有部门都不嫩够重复
      // rule规则对象，value绑定值，callback回传给检验的结果
      /* let isHave = false
      this.originList.forEach(item => {
        if (item.code === value) {
          isHave = true
        }
      })
      if (isHave) {
        // 如果重复
        callback(new Error(`编码${value}已经存在了`))
      } else {
        callback()
      } */
      // 用includes方法：让那个数组直接是code值，判断value是否在这个数组里，如果在返回true
      let codeList = this.originList.map(item => item.code) // ['XZB','code值','..']
      if (this.isEdit) {
        // 编辑部门: 部门编码, 不能和数组里所有人对比, 先把除了自己以外的对象过滤出来
        // 问题：外面代码把编辑时部门编码和自己比较，直接冲突报错了，但是逻辑不通，~我是可以用自己本身编码的
        // 解决：把大数组里正在编辑的这个部门对象过滤掉！！把其他部门对象留下来，形成一个新数组
        // filter返回符合=>条件里的的对象，形成新数组在原地(不改变原数组)
        // code过滤有问题：编辑的对象本来是code是10001，但是value值改成10009，在全部数组里找到code值为10009对象删除掉
        // 解决：不能用code判断，外面把点击行的部门id传入，通过部门id把正在编辑的这个对象过滤掉
        codeList = this.originList.filter(item => item.id !== this.djId).map(item => item.code)
      }
      codeList.includes(value) ? callback(new Error(`编码${value}已经存在了`)) : callback()
    }
    // 验证部门名字 （不能和同级重复）
    const validName = (rule, value, callback) => {
      // 添加子部门：部门名字不能和同级部门重名
      // 点击部门后，怎么找到下属的同级部门？
      // 子部门pid = 父部门id（点击添加子部门的时候，点击这行部门就是父级部门，djId就是父级的id
      let nameList = this.originList.filter(item => item.pid === this.djId).map(item => item.name)
      if (this.isEdit) {
        // 编辑部门：部门名字不能和同级部门重名
        // 点击编辑部门后，怎么找到同级部门
        // 已知：所有部门的数组（对象id和pid），点击这一行的部门id
        // 1.通过编辑部门id，上大数组里去找到这个部门对象
        const theObj = this.originList.find(item => item.id === this.djId)
        console.log(theObj)
        // 2.拿出pid值
        const targetPid = theObj.pid
        console.log(targetPid)
        // 3.同级部门的pid都是相等的
        // const result = this.originList.filter(item => item.pid === targetPid)
        // console.log(result)
        // 4.找到所有同级部门对象
        nameList = this.originList
          .filter(item => item.pid === targetPid && item.id !== this.djId)
          .map(item => item.name)
      }
      nameList.includes(value) ? callback(new Error(`名字${value}已经存在了`)) : callback()
    }
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加编辑确认按钮
    hSubmit() {
      this.$refs.deptForm.validate(valid => {
        if (!valid) return
        // 把数据对象传回给父组件
        this.$emit('departEV', { ...this.form })
        // 清空表单内容
        // console.log(this.$refs.deptForm)
        // this.$refs.deptForm.resetFields()
        this.$refs.deptForm.resetFields()
        // this.form = {
        //   name: '', // 部门名称
        //   code: '', // 部门编码
        //   manager: '', // 部门管理者
        //   introduce: '' // 部门介绍
        // }
        // this.$emit('update:props变量名', 值)
        this.$emit('update:dialogVisible', false) // 关闭弹框
        // 自定义
        // this.$emit('close', false) // 关闭弹框
      })
    },

    // 取消编辑确认按钮
    hCancel() {
      // 子想要直接绑定给父变量一个值
      this.$emit('update:dialogVisible', false) // 关闭弹框
      this.$refs.deptForm.resetFields()
    }
  }
}
</script>
